@datepicker-prefix: ~'w-datepicker';

.@{datepicker-prefix} {
  &-weekday,
  &-week {
    display: flex;
    width: 100%;
  }
  &-weekday > div,
  &-week > div {
    display: table-cell;
    flex: 1;
    min-width: 26px;
    min-height: 26px;
    vertical-align: middle;
    text-align: center;
  }
  &-weekday > div {
    font-weight: bold;
  }
  &-weekday > div.end,
  &-week > div.end {
    color: #6f6f6f;
  }
  &-week > div {
    border-radius: 3px;
    cursor: pointer;
    &.prev,
    &.next {
      color: #d3d3d3;
    }
    > div {
      transition: background-color 0.3s, color 0.3s;
      margin: 0 2px;
      border-radius: 3px;
      line-height: 22px;
    }
    &.today > div {
      background-color: #eaeaea;
    }
    &.selected,
    &.selected:hover {
      > div {
        color: #fff;
        background-color: #2ea3f4;
      }
    }
    &:hover > div {
      background-color: #eaeaea;
      color: #393e48;
    }
    &:active > div {
      background-color: #d2d2d2;
    }
    &.disabled,
    &.disabled:hover {
      > div {
        color: #d3d3d3;
        cursor: not-allowed;
        background-color: #f5f5f5;
      }
      &.today > div {
        background-color: rgba(189, 189, 189, 0.47);
        color: #fff;
      }
      &.selected > div {
        background-color: rgba(46, 163, 244, 0.47);
        color: #fff;
      }
    }
  }
  &-body {
    padding-top: 5px;
  }
}
